<template>
  <el-container>
    <!-- 表格 -->
    <el-card style="margin-top:50px">
      <el-main>
        <el-table  style="width: 100%"  :data="tableData.data">
          <el-table-column prop="questioner" label="发问人" align="center"></el-table-column>
          <el-table-column prop="isAnswer" label="是否回答" align="center" :formatter="answerState"></el-table-column>
          <el-table-column prop="createTime" label="发问时间"  align="center" :formatter="timeFormart"></el-table-column>
          <el-table-column  label="操作" align="center">
            <template slot-scope="scope">
               <el-button @click="handleEdit(scope.$index, scope.row)" type="text" size="small">回答问题</el-button>
               <el-button @click="handleDelete(scope.$index, scope.row)" type="text" size="small">删除问题</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <div class="block">
        <el-pagination
          @size-change="changePageSize"
          @current-change="changeCurrentPage"
          @prev-click="prevPage"
          @next-click="nextPage"
          :current-page="tableData.currentPage"
          :page-sizes="[5, 10, 15, 20,25,30,35,40]"
          :page-size="tableData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total">
        </el-pagination>
      </div>
    </el-card>
    <el-footer>
    </el-footer>
    <!-- 问题回复 -->
    <el-dialog title="问题回复" :visible.sync="dialogFormVisible">
      <el-form
      :model="changeData"
        ref="changeData"
        style="font-size:20px;">
        <el-form-item label="问题：" prop="loginName">
          <el-input
            type="textarea"
            :autosize="{ minRows: 10, maxRows: 15}"
            v-model="changeData.questionContent"
            :disabled="true">
          </el-input>
        </el-form-item>
        <el-form-item label="请输入回答：" prop="loginName">
          <el-input
            type="textarea"
            :autosize="{ minRows: 10, maxRows: 15}"
            placeholder="请输入内容"
            v-model="changeData.answerContent">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
          <el-button type="primary" icon="el-icon-edit-outline" @click="submitEdit">回复</el-button>
      </div>
  </el-dialog>

  </el-container>


</template>
<script>
import {getAllQuestionApi,questionDeleteApi,changeQuestionApi} from "@/api/questionApi";
import store from "@/vuex/store";
export default {
        data() {
            return{
                 dialogFormVisible:false,
                 userName: store.getters.username,
                 tableData: {
                    //表格数据
                    data: [
                      {
                        id:"",
                        isAnswer:"",
                        createTime:"",
                        updateTime:"",
                        questionContent:"",
                        answerContent:"",
                        answerPerson:""
                      }
                    ],
                    currentPage: 1,
                    pageSize: 10,
                    total: 0
                },
                changeData:{
                  id:"",
                  isAnswer:"",
                  createTime:"",
                  updateTime:"",
                  questionContent:"",
                  answerContent:"",
                  answerPerson:""
                }
            }
        },
        created:function(){
          this.getAllQuestion();
        },
        methods:{
            changePageSize(val) {
            this.tableData.pageSize = val;
            this.getAllQuestion();
            },
            changeCurrentPage(val) {
            this.tableData.currentPage = val;
            this.getAllQuestion();
            },
            prevPage(val) {
            this.tableData.currentPage = val;
            this.getAllQuestion();
            },
            nextPage(val) {
            this.tableData.currentPage = val;
            this.getAllQuestion();
            },
            //获取问题列表
            getAllQuestion(){
              getAllQuestionApi(this.tableData).then(res=>{
                  this.tableData.data=res.data.data.items;
                  this.tableData.total=res.data.data.total;
              })
            },
            //回答状态
            answerState(row){
               return row.isAnswer == 0
                ? "未回答"
                : row.isAnswer == 1
                ? "已回答"
                : "未知";
            },
            //格式化时间
            timeFormart(row){
              var date = new Date(row.createTime);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
              var Y = date.getFullYear() + '-';
              var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
              var D = date.getDate() + ' ';
              var h = date.getHours() + ':';
              var m = date.getMinutes() + ':';
              var s = date.getSeconds();
              return Y+M+D+" "+h+m+s;
            },
            //回答问题
            handleEdit(index, row) {
              this.dialogFormVisible=true;//打开回复问题
              this.changeData.questionContent=row.questionContent;//回显问题内容
              this.changeData.answerContent=row.answerContent;
              this.changeData.id=row.id;
              this.changeData.answerPerson=this.userName;
            },
            //提交回复
            submitEdit(){
              changeQuestionApi(this.changeData)
                .then(res=>{
                  this.dialogFormVisible=false;
                  this.getAllQuestion();
                  this.$message.success(res.data.respondMessage);
                }).catch(res=>{
                  this.$message.error(res.data.respondMessage);
                })
            },
            //删除问题
            handleDelete(index, row) {
              //根据id删除
              this.$confirm("是否将永久删除此问题?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              }).then(() =>{
                questionDeleteApi(row.id).then(res=>{
                  this.getAllQuestion();
                  this.$message.success(res.data.respondMessage);
                })
                .catch(res=>{
                  this.$message.error(res.data.respondMessage);
                })
              }).catch(()=>{
                  this.$message({
                  showClose: true,
                  message: "已取消删除！",
                  type: "info",
                });
              })
        
            },
        }
    }
</script>
<style>
  .el-textarea__inner{
    font-size: 15px;
  }
</style>